<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.let</title>
</head>

<body>
    <div>点击1</div>
    <div>点击2</div>
    <div>点击3</div>
    <script>
        /**
         *  1. 不允许重复声明；
            2. 块儿级作用域（局部变量）；
            3. 不存在变量提升；  当前作用域变量自动提升到最前面
            4. 不影响作用域链
         */
        // var a = 10;
        // var a = 20;
        // let b = 10;
        // let b = 20;

        // {
        //   var a = 10;
        // }
        // console.log(a);
        // {
        //   let b = 10;
        // }
        // console.log(b);  // b is not defined

        // function fun() {
        //     console.log(a);
        //     var a = 10;
        // }
        // fun();

        // function fun2() {
        //     console.log(a);
        //     let a = 10;
        // }
        // fun2();

        // 作用域链
        // var divNodes = document.querySelectorAll("div");
        // for (var i = 0; i < divNodes.length; i++) {

        //     (function (i) {
        //         var divNode = divNodes[i];
        //         divNode.onclick = function () {
        //             console.log(divNode.innerText);
        //         }

        //     }(i))


        // }

        var divNodes = document.querySelectorAll("div");
        for (let i = 0; i < divNodes.length; i++) {

            let divNode = divNodes[i];
            divNode.onclick = function () {
                console.log(divNode.innerText);
            }




        }
    </script>

</body>

</html>